<template>
  <view>
    <!-- 搜索框 -->
    <my-search bgColor="#C00000" radius="18" @myClick="gotoSearch">
      <!-- 如果不适用组件中的插槽默认值，就需要重新在该页面写放在插槽中的元素的样式 -->
     <!-- <template #icon>
        <uni-icons type="search" size="18"></uni-icons>
      </template>
      <template #searchText>
        <text class="search-text">搜索</text>
      </template> -->
    </my-search>
    
    <view class="scroll-view-box">
      <!-- 左侧滚轮条 -->
      <scroll-view scroll-y="true" class="left-scroll-view" :style="{height: wh + 'px'}">
        <block v-for="(item, index) in cateList" :key="item.cat_id">
          <view class="left-scroll-view-item" :class="{active: active === index}"
          @click="selectedCate(index)" >{{ item.cat_name }}</view>
        </block>
      </scroll-view>
      <!-- 右侧滚轮条 -->
      <scroll-view scroll-y="true" class="right-scroll-view" :style="{height: wh + 'px'}" :scroll-top="scrollTopInitLocation">
        <!-- 二级分类 -->
        <view class="cate-level-tow" v-for="(item_tow, i_tow) in cate_level_tow_list" :key="item_tow.cat_id">
          <!-- 二级分类的标题 -->
          <view class="cate-level-tow-title">
            / {{ item_tow.cat_name }} /
          </view>
          <!-- 二级分类的容器 -->
          <view class="cate-level-tow-container">
            <!-- 三级分类的列表 -->
            <view class="cate-level-thrre-item" v-for="(item_three, i_three) in item_tow.children" :key="i_three" @click="gotoGoodsList(item_three)">
              <!-- 三级分类项的图片 -->
              <image :src="item_three.cat_icon" mode=""></image>
              <!-- 三级分类项的文本 -->
              <text>{{ item_three.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import badgeMixins from '@/mixins/tabbar-badge.js'
  
  export default {
    // 挂载mixins
    mixins: [badgeMixins],
    data() {
      return {
        // 设备的可使用高度
        wh: 0,
        // 分类列表信息
        cateList: [],
        cate_level_tow_list: [],
        // 激活项的索引
        active: 0,
        // 右侧滚动条起始值
        scrollTopInitLocation: 0
      };
    },
    created() {
      // 获取设备信息
      const systemInfo = uni.getSystemInfoSync()
      this.wh = systemInfo.windowHeight - 50
      
      this.getCateList()
    },
    methods: {
      async getCateList() {
        const {data: res} = await uni.$http.get('/api/public/v1/categories')
        if(res.meta.status !== 200) return uni.$showMsg()
        this.cateList = res.message
        this.cate_level_tow_list = this.cateList[this.active].children
      },
      selectedCate(index) {
        this.active = index
        // 重新为二级分类列表赋值
        this.cate_level_tow_list = this.cateList[index].children
        // 重新为右侧滚动条位置设置为0  由于如果起始scrol-top值为0，然后点击后又赋值为0会不起效果，所以这里就给定一个random函数随机生成[0,1)之间的数
        this.scrollTopInitLocation = Math.random();
      },
      // 点击三级分类项跳转到商品列表页面
      gotoGoodsList(item) {
        console.log(item)
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
        })
      },
      gotoSearch() {
        // console.log('ok')
        // 跳转到搜索页面
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
  .scroll-view-box {
    display: flex;
    
    .left-scroll-view {
      width: 120px;
      
      .left-scroll-view-item {
        background-color: #F7F7F7;
        line-height: 60px;
        text-align: center;
        font-size: 12px;
        &.active {
          position: relative;
          background-color: #FFFFFF;
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 3px;
            height: 50%;
            background-color: #C00000;
          }
        }
      }
    }
    
    .right-scroll-view {
      background-color: #FFFFFF;
      .cate-level-tow-title {
        padding: 15px 0 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
      }
      .cate-level-tow-container {
        display: flex;
        flex-wrap: wrap;
        
        .cate-level-thrre-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 33.33%;
          margin-bottom: 10px;
          
          &>image {
            width: 60px;
            height: 60px;
          }
          &>text {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
